---
title: Claude Clone
description: Customized colors and styles for a Claude look and feel
---

import { Claude } from "@/components/example/claude/Claude";
import { DocsRuntimeProvider } from "@/app/(home)/DocsRuntimeProvider";

## Live Demo

<div className="not-prose h-[700px]">
  <DocsRuntimeProvider>
    <Claude />
  </DocsRuntimeProvider>
</div>

## Overview

The Claude Clone example demonstrates how to customize assistant-ui to match Anthropic's Claude interface. This includes the characteristic orange color scheme, clean typography, and minimalist design that users associate with Claude.

## Features

- **Claude Styling**: Authentic orange color scheme and visual design
- **Clean Typography**: Claude's distinctive font choices and text styling
- **Minimalist Layout**: Clean, uncluttered interface design
- **Message Formatting**: Proper message styling with Claude's visual patterns
- **Responsive Design**: Mobile-optimized layout
- **Accessibility**: High contrast and accessible design patterns

## Usage

To create a Claude-style interface:

1. **Color Scheme**: Apply Claude's orange (#ff6900) and neutral color palette
2. **Typography**: Use clean, readable fonts with proper hierarchy
3. **Layout Design**: Implement Claude's minimalist, content-focused layout
4. **Component Styling**: Customize all UI elements to match Claude's aesthetic

## Code

Key styling elements for Claude clone:

- **Primary Color**: Claude's signature orange for interactive elements
- **Typography**: Clean, readable fonts with proper line spacing
- **Spacing**: Generous whitespace and clean margins
- **Borders**: Subtle borders and dividers
- **Shadows**: Minimal, subtle shadow effects

The implementation focuses on clean, accessible design while maintaining all assistant-ui functionality.
